<!--  -->
<template>
    <div>
        <Card>
            <div slot="title" >
                <Button v-if='btnp.khgli_xzkh' @click="handleClickAddForm" class="zh-hollow" type="primary" icon="plus-round">新增客户</Button>
            </div>
            <Form :model="formItem" :label-width="70">
                <Row :gutter="10" type="flex"  align="middle"  >
                    <Col span="8">
                        <FormItem label="客户名称">
                            <Input v-model="formItem.name" placeholder="客户名称" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="覆盖区域">
                            <Cascader change-on-select :data="twoAreaData" v-model="search.location"></Cascader>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="新增时间">
                            <DatePicker v-model="search.timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="10" >
                    <Col span="8" offset="16"  style="text-align:right;">
                        <Button @click="searchGetTable" class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                    </Col>
                </Row>
            </Form>
        </Card> 
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page :current.sync="formItem.pageNumber"  :total="total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card> 
        <Modal :title="customer_title" :loading='saveLoad' v-model="modal_customer" @on-ok="save" ok-text="保存" cancel-text="放弃操作" :mask-closable="false" :class="cus_classes" >
            <Form v-if="cus_modal_type==='view'" :model="cusForm" :label-width="100" style="padding:15px 30px;">
                <FormItem label="客户名称：">
                    {{cusForm.name}}
                </FormItem>
                <FormItem label="品牌名称：">
                    {{cusForm.brand_name}}
                </FormItem>
                <FormItem label="覆盖区域：">
                    {{!!cusForm.area[0]?`${cusForm.area[0]} ${cusForm.area[1]}`:''}}
                </FormItem>
                <FormItem label="App标题名称：">
                    {{cusForm.logo_name}}
                </FormItem>
                <FormItem label="联系人：">
                   {{cusForm.linkman}}
                </FormItem>
                <FormItem label="联系电话：" class="zh-radio-input">
                    {{cusForm.contact_number}}
                </FormItem>
                <FormItem label="图片：">
                    <img @click="handleView(cusForm.logo.url)" :src="domain+cusForm.logo.url" alt="" style="width:120px;">                   
                </FormItem> 
            </Form>
            <Form v-else :model="cusForm" :label-width="90" style="padding:15px 30px;">
                <FormItem label="客户名称*">
                    <Input v-model="cusForm.name" placeholder="客户的完整名称" :maxlength="20"></Input>
                </FormItem>
                <FormItem label="品牌名称*">
                    <Input v-model="cusForm.brand_name" placeholder="代替客户名称，在系统消息中显示" :maxlength="6"></Input>
                </FormItem>
                <FormItem label="覆盖区域*">
                    <Cascader change-on-select :data="twoAreaData" v-model="cusForm.area"></Cascader>
                </FormItem>
                <FormItem label="App标题名称*">
                    <Input v-model="cusForm.logo_name" :maxlength="10"></Input>
                </FormItem>
                <FormItem label="联系人">
                    <Input v-model="cusForm.linkman" :maxlength="5"></Input>
                </FormItem>
                <FormItem label="联系电话" class="zh-radio-input">
                    <RadioGroup v-model="radio" vertical @on-change="radioChange">
                            <Radio label="mobile" style="marginBottom:10px;">手机号</Radio>
                            <Radio label="landline">座机号</Radio>
                    </RadioGroup>
                    <div>
                        <Input  style="marginBottom:10px;" :maxlength="11" :disabled="radio!=='mobile'" v-model="addForm.mobile" placeholder="手机号"></Input>
                        <div class="landline-input-container">
                        <Input v-model="addForm.landline1" :disabled="radio==='mobile'" placeholder="区号"></Input>-
                        <Input v-model="addForm.landline2" :disabled="radio==='mobile'||addForm.landline1==''" placeholder="座机号"></Input>-
                        <Input v-model="addForm.landline3" :disabled="radio==='mobile'||addForm.landline1==''||addForm.landline2==''" placeholder="分机号"></Input>
                        </div>
                    </div>
                </FormItem>
                <FormItem label="图片">
                    <template v-if="!!cusForm.logo.url">
                        <div class="upload-wrap" v-if="cusForm.logo.status === 'finished'">
                            <img :src="domain+cusForm.logo.url" style="display:block;width:120px;height:120px;">
                            
                            <div class="upload-cover" style="width:120px;height:120px;">
                                    <div class="iconBox">
                                        <Icon type="ios-eye-outline" @click.native="handleView(cusForm.logo.url)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(cusForm.logo.url)"></Icon>
                                    </div> 
                                    
                                </div>
                        </div>
                        <template v-else>
                            <Progress v-if="cusForm.logo.showProgress" :percent="cusForm.logo.percentage" hide-info></Progress>
                        </template>
                    </template>
                    <template v-else>
                        <Upload
                            ref="upload"
                            multiple
                            :default-file-list="defaultList"
                            :show-upload-list="false"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="2048"
                            :on-format-error="handleFormatError"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="handleBeforeUpload"
                            type="drag"
                            :data="upLoadData"
                            action=" http://upload.qiniup.com"
                            style="display: inline-block;width:120px;height:120px;">
                            <div style="width:120px;height:120px;line-height:120px;">
                                <Icon type="ios-plus-empty" :size='40'></Icon>
                            </div>
                        </Upload>
                        <p>请上传jpg/png格式，小于2M的图片。</p>
                    </template>
                   
                </FormItem> 
            </Form>
        </Modal> 
        <Modal title="查看logo" v-model="look_pic_wrap.look_pic" class="no_footer_modal">
            <!-- <p slot="header" >查看凭证</p> -->
            <img style="width:100%;" :src="domain+look_pic_wrap.src" alt="">
        </Modal>
        <Modal title="模块管理" v-model="modal_module" :mask-closable="false" :closable="!module_edit" :class="!module_edit&&openModules.length<=0?'no_footer_modal':''">
            <p style="padding:15px 30px">
                客户开通的模块决定客户在管理后台或APP可以看到的菜单或入口。移除模块将隐藏相应流程的入口，不会影响已产生的数据。
            </p>
            <div class="zh-flex  zh-flex-wrap" style="padding:15px 28px">
                <template v-if="openModules.length>0">
                    <dl v-for="item in openModules" :key="item.value" class="module-item">
                        <dt class="module-item-body">
                            <img :src="item.image_url" alt="">
                            <Icon @click.native="removeModule(item)" :size="25" v-if="module_edit" class="remove" type="minus-circled"></Icon>
                        </dt>
                        <dd class="module-item-foot">
                            {{item.module_name}}
                        </dd>
                    </dl>   
                </template>
                <template v-if="remainingModules.length>0&&!module_edit">
                    <dl class="module-item">
                        <dt class="module-item-body">
                            <div class="add-module-btn" @click="handleGetNewModules">
                                <Icon :size="25" type="ios-plus-empty"></Icon>    
                            </div>
                        </dt>
                        <dl class="module-item-foot">新增模块</dl>
                    </dl>
                   
                    
                </template>
            </div>
            
                <div v-if="!module_edit" slot="footer">
                    <div class="zh-flex zh-flex-5" >
                        <Button @click="module_edit=true;" class="zh-hollow" type="primary" >编辑</Button>
                    </div>
                </div>
                <div v-if='module_edit' slot="footer">
                    <div class="zh-flex zh-flex-5" >
                        <Button @click="module_edit=false;" class="zh-hollow" type="primary" >完成</Button>
                    </div>
                </div>
            
            
        </Modal> 
        <Modal :loading="addLoad" title="新增模块" v-model="modal_add_modules" :mask-closable="false" @on-ok="addCusModules" ok-text="增加" cancel-text="放弃操作">
            <div class="zh-flex  zh-flex-wrap" style="padding:15px 28px">
                
                    <dl v-for="(item,index) in remainingModules" :key="item.value" class="module-item">
                        <dt class="module-item-body" style="cursor:pointer" @click="handleSelected(item,index)">
                            <img :src="item.image_url" alt="">
                            <Icon  :size="25" v-if="item.selected" class="add" type="checkmark-circled"></Icon>
                        </dt>
                        <dd class="module-item-foot">
                            {{item.module_name}}
                        </dd>
                    </dl>   
               
            </div>
        </Modal>  
    </div>
</template>

<script>
import util from '@/libs/util.js'
import {
    getpartnerTable,
    saveCustomerInfo,
    getPartnerModules,
    deletePartnerModule,
    addPartnerModules,
    getNewModules
} from '@/libs/partner.js'
import {getQiniuToken} from '@/libs/get.js'
export default {
    name:'',
    data () {
        return {
            addLoad:true,
            partnerUuid:'',
            saveLoad:true,
            radio:'mobile',
            upLoadData:{
                token:'',
                unique_names: true,
                domain:this.$store.state.app.domain
            },
            defaultList:[],
            domain:this.$store.state.app.domain,
            btnp:{},
            btn:{
                khgli_xzkh:false,
                khgli_ckxx:false,
                khgli_bjxx:false,
                khgli_mkgl:false,
                khgli_xgpz:false,
                khgli_dj:false,
                khgli_jd:false,
            },
            modal_add_modules:false,
            remainingModules:[],
            openModules:[],
            module_edit:false,
            modal_module:false,
            look_pic_wrap:{
                look_pic:false,
                src:''
            },
            addForm:{
                mobile:'',
                landline1:'',
                landline2:'',
                landline3:''
            },
            cusForm:{
                uuid:'',
                name:'',
                brand_name:'',
                area:[],
                logo_name:'点点维',
                linkman:'',
                contact_number:'',
                logo:{
                    name:'',
                    url:'',
                    status:'',
                    showProgress:true,
                    percentage:0
                }
            },
            cus_classes:'',
            cus_modal_type:'',//view edit add
            customer_title:'',
            modal_customer:false,
            loading:true,
            total:0,
            search:{
                location:[],
                timeRange:[]
            },
            formItem:{
                name:'',
                pageNumber:1,
                pageSize:10
            },
            twoAreaData:[] ,
            columns:[
                {
                    key:'name',
                    title:'客户名称',
                    minWidth:150
                },
                {
                    key:'region',
                    title:'覆盖区域',
                    minWidth:150
                },
                {
                    key:'linkman',
                    title:'联系人',
                    minWidth:90
                },
                {
                    key:'contact_number',
                    title:'联系电话',
                    minWidth:100
                },
                {
                    key:'time',
                    title:'新增时间',
                    minWidth:150,
                },
                {
                    key:'action',
                    title:'操作',
                    fixed:'right',
                    align:'center',
                    minWidth:180,
                    render:(h,params)=>{
                        return h('div',[
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.khgli_ckxx?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                    this.modal_customer=true;
                                    this.cus_modal_type='view';
                                    this.getRowInfo(params.row);
                                }
                                }
                            },'查看信息'),
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.khgli_bjxx?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                    this.modal_customer=true;
                                    this.cus_modal_type='edit';
                                    this.qiniuToken();
                                    this.getRowInfo(params.row)
                                }
                                }
                            },'编辑信息'),
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.khgli_mkgl?'inline-block':'none'
                                },
                                on:{
                                    click:async ()=>{
                                        this.partnerUuid=params.row.uuid;
                                        await this.clickgetNewModules();
                                        await this.getCusModule(params.row.uuid);
                                        
                                    }
                                }
                            },'模块管理'),
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.khgli_xgpz?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                    this.$router.replace('/partner/config?id='+params.row.uuid)
                                    localStorage.configName=params.row.name;
                                }
                                }
                            },'修改配置')
                        ])
                    }
                }
            ],
            data:[]
        };
    },
    methods:{
        async save(){
            const reg=this.$store.state.app.mobileReg;
            const reg1=/^0[0-9]{2,3}/;
            const reg2=/[2-9][0-9]{6,7}/;
            const reg3=/\d{2,4}/;
            if(this.cusForm.name.length<=0||this.cusForm.name==''){
                this.$Notice.error({
                    desc:'请输入客户名称'
                })
            }else if(this.cusForm.brand_name.length<=0||this.cusForm.brand_name==''){
                this.$Notice.error({
                    desc:'请输入客户的品牌名称'
                })
            }else if(this.cusForm.area.length<=0||this.cusForm.area[0].length<=0){
                this.$Notice.error({
                    desc:'请选择客户覆盖区域'
                })
            }else if(this.cusForm.logo_name.length<=0||this.cusForm.logo_name==''){
                this.$Notice.error({
                    desc:'请输入APP标题'
                })
            }else if(this.radio=='mobile'&&this.addForm.mobile!=''&&!reg.test(this.addForm.mobile)){
                this.$Notice.error({
                    desc:'手机号格式错误'
                })
            }else if(this.radio!=='mobile'&&this.addForm.landline1!=''&&this.addForm.landline2==''){
                this.$Notice.error({
                    desc:'请输入座机号'
                })
            }else if(this.radio!=='mobile'&&this.addForm.landline1!=''&&!reg1.test(addForm.landline1)){
                this.$Notice.error({
                    desc:'请输入正确的座机区号'
                })
            }else if(this.radio!=='mobile'&&this.addForm.landline1==''&&this.addForm.landline2!=''){
                this.$Notice.error({
                    desc:'请输入座机区号'
                })
            }else if(this.radio!=='mobile'&&this.addForm.landline2!=''&&!reg2.test(addForm.landline2)){
                this.$Notice.error({
                    desc:'请输入正确的座机号'
                })
            }else if(this.radio!=='mobile'&&this.addForm.landline2!=''&&(this.addForm.landline1!=''||this.addForm.landline2!='')){
                this.$Notice.error({
                    desc:'有分机号，座机区号和座机号必填'
                })
            }
            else if(this.radio!=='mobile'&&this.addForm.landline3!=''&&!reg3.test(addForm.landline2)){
                this.$Notice.error({
                    desc:'请输入正确的座机分号'
                })
            }else{
                let form =JSON.parse(JSON.stringify(this.cusForm));
                if(this.radio=='mobile'){
                    form.contact_number=this.addForm.mobile;
                }else{
                    if(this.addForm.landline1!=''){
                        form.contact_number=this.addForm.landline1+'-'+this.addForm.landline2;
                    }
                    if(this.addForm.landline3!=''){
                        form.contact_number=form.contact_number+'-'+this.addForm.landline3;
                    }
                }
                form.province=form.area[0];
                form.city=form.area[1];
                form.image_url=form.logo.url;
                let res=await saveCustomerInfo(form);
                let response=res.data;
                if(response.code==200){
                    this.$Notice.success({
                        desc:'已保存'
                    });
                    this.modal_customer=false;
                    this.searchGetTable();

                }else{
                    this.$Notice.error({
                        desc:response.msg
                    });
                }
            }
            let that=this;
            this.saveLoad=false;
            setTimeout(()=>{
                that.saveLoad=true;
            },500)
            
        },
        async qiniuToken(){
            let res=await getQiniuToken();
            let response=res.data;
            if(response.code===200){
                this.upLoadData.token=JSON.parse(response.data).uptoken;
            }else{
                this.$Notice.error({
                    title: '请求出错',
                    desc:response.msg
                });
            }
        },
        radioChange(val){
            if(val==='mobile'){
                this.addForm.landline1='';
                this.addForm.landline2='';
                this.addForm.landline3='';
                
            }else{
            this.addForm.mobile='';
                
            }
        },
        searchGetTable(){
            this.formItem.pageNumber=1;
            this.getTable();
        },
        getRowInfo(obj){
            this.cusForm={
                uuid:obj.uuid,
                name:obj.name,
                brand_name:obj.brand_name,
                area:!!obj.region?obj.region.split(' '):[],
                logo_name:obj.logo_name,
                linkman:obj.linkman,
                contact_number:obj.contact_number,
                logo:{
                    name:'',
                    url:obj.image_url,
                    status:!!obj.image_url?'finished':'',
                    showProgress:true,
                    percentage:0
                }
            }
            if(obj.contact_number!=''){
                if(obj.contact_number.includes('-')){
                    this.radio='landline';
                    let arr=obj.contact_number.split('-');
                    this.addFrom.landline1=arr[0];
                    this.addForm.landline2=arr[1];
                    if(!arr[2]){
                        this.addForm.landline3=arr[2];
                    }
                }else{
                    this.radio='mobile';
                    this.addForm.mobile=obj.contact_number;
                }
            }
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            if(!!this.search.timeRange[0]&&this.search.timeRange.length>0){
                form.startTime=util.time1(this.search.timeRange[0]);
                form.endTime=util.time1(this.search.timeRange[1]);
            }
            if(this.search.location.length>0&&!!this.search.location[0]){
                form.province=this.search.location[0];
                form.city=this.search.location[1];
            }
            let res=await getpartnerTable(form);
            let response=res.data;
            if(response.code===200){
                this.total=response.data.total;
                this.data=response.data.rows.map(item=>{
                    item.time=item.created.slice(0,16);
                    return item
                })
                this.loading=false;
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
                
            }
        },
        pageSizeChange(size){
            //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        },

        async getCusModule(uuid){
            let res= await getPartnerModules(uuid);
            let response=res.data;
            if(response.code==200){
                this.openModules=response.data.data;
                this.modal_module=true;
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async addCusModules(){
            let uuids=this.remainingModules.filter((item=>{
                if(!!item.selected){
                    return item
                }
            })).map(item=>{
                return item.module_uuid
            }).join(',');
            if(uuids.length<=0){
                this.modal_add_modules=false;
            }else{
                let res=await addPartnerModules(this.partnerUuid,uuids);
                let response=res.data;
                if(response.code==200){
                    this.$Notice.success({
                    desc:'已增加'
                });
                this.getCusModule(this.partnerUuid);
                this.modal_add_modules=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
            this.addLoad=false;
            let that=this;
            setTimeout(()=>{
                that.addLoad=true;
            },500)
        },
        async handleGetNewModules(){
            await this.clickgetNewModules();
            this.modal_add_modules=true;
        },
        async clickgetNewModules(){
            let res= await getNewModules(this.partnerUuid);
            let response=res.data;
            if(response.code==200){
                this.remainingModules=response.data.map(item=>{
                    item.selected=false;
                    return item
                });
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },


        handleSelected(item,index){
            this.remainingModules[index].selected=!this.remainingModules[index].selected
        },
        async removeModule(obj){
            let res=await deletePartnerModule(obj.uuid);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:'已停用'
                });
                this.getCusModule(obj.partner_code);
                this.clickgetNewModules();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },  
        handleClickAddForm(){
            this.modal_customer=true;
            this.cus_modal_type='add';
            this.qiniuToken();
        },
        handleView(img){
            this.look_pic_wrap.look_pic=true;
            this.look_pic_wrap.src=img

        },
        handleRemove(img){
            this.uploadList=[];
            this.cusForm.logo={
                name:'',
                url:'',
                status:'',
                showProgress:true,
                percentage:0
            }
        },
        handleSuccess (res, file) {
            this.cusForm.logo=file;
            this.cusForm.logo.url=res.hash;
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '图片格式错误',
                desc: '请选择 jpg 或 png 格式的图片'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '图片过大',
                desc: '请选择文件大小小于2M的图片'
            });
        },
        handleBeforeUpload (file) {
            const check = this.$refs.upload.fileList.length < 2;
            if (!check) {
                this.$Notice.warning({
                    title: '一次只能上传一张'
                });
            }
            return check;
        }
    },
    watch:{
        cus_modal_type:function(){
            console.log(this.cus_modal_type);
            this.customer_title=this.cus_modal_type==='add'?'新增客户':this.cus_modal_type==='edit'?'编辑客户信息':'查看客户信息';
            this.cus_classes=this.cus_modal_type==='view'?' no_footer_modal':'';
            console.log(this.customer_title)
        },
        modal_customer:function(){
            console.log(this.modal_customer)
            if(!this.modal_customer){
                this.radio='mobile';
                this.addForm={
                    mobile:'',
                    landline1:'',
                    landline2:'',
                    landline3:'',
                };
                this.cusForm={
                    uuid:'',
                    name:'',
                    brand_name:'',
                    area:[],
                    logo_name:'点点维',
                    linkman:'',
                    contact_number:'',
                    logo:{
                        name:'',
                        url:'',
                        status:'',
                        showProgress:true,
                        percentage:0
                    }
                }
            }
        },
        modal_module:function(){
            if(!this.modal_module){
                this.partnerUuid='';
            }
        }
    },
    created () {
        let that=this;
        setTimeout(() => {
            that.twoAreaData=JSON.parse(JSON.stringify(that.$store.state.user.areaData)).map(item=>{
                    if(!!item.children){
                        item.children=item.children.map(child=>{
                        return {
                            value:child.value,
                            label:child.label
                        }
                    })
                    }
                    
                    return item
                })
        }, 3000);
        this.btnp=util.bpower(this,this.btn);
        this.getTable();
    }
}

</script>
<style lang='scss' >
.ivu-modal-footer>div{
    width:100%;
}
.module-item{
    text-align:center;
    margin:5px 8px;
    &-body{
        width:120px;
        height:120px;
        line-height: 120px;
        position:relative;
        .tag{
            width:100%;
            height:100%;
            line-height:120px;
            position: absolute;
            top:0;
            left:0;
            z-index:50;
            font-weight:600;
        }
        img{
            position:absolute;
            width:120px;
            height:120px;
            top:0;
            left:0;
        }
        .remove{
            position:absolute;
            width:25px;
            height:25px;
            top:0;
            right:0;
            color:#ed3f14;
            z-index:100;
            cursor: pointer;
        }
        .add{
            position:absolute;
            width:25px;
            height:25px;
            top:0;
            right:0;
            color:#19be6b;
            z-index:100;
            cursor: pointer;
        }

    }
    &-foot{
        margin-top:5px;
    }
}
.add-module-btn{
    width:120px;
    height:120px;
    line-height:120px;
    border:1px solid #948c8c;
    text-align:center;
    cursor: pointer;

}
.add-module-btn:hover{
    border-color:#2d8cf0;
    color:#2d8cf0;
}
.upload-wrap{
    width:120px;
    height:120px;
    text-align:center;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.iconBox{
    display:inline-block;
    position:absolute;
    top:50%;
    left:50%;
   transform: translateX(-50%) translateY(-50%);

}
.upload-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    i{
        color: #fff;
        font-size: 30px;
        cursor: pointer;
        margin: 0 10px;
    }
}
.upload-wrap:hover .upload-cover{
    display: block;
}
</style>